import './index.scss'
import { useMemo, useState ,useEffect} from 'react'
import { DownOutline } from 'antd-mobile-icons'
import { DatePicker } from 'antd-mobile'
import MyNavBar from '@/components/MyNavBar'
import DayBill from './components/DayBill'
import dayjs from 'dayjs'
import classNames from 'classnames'
import { useSelector } from 'react-redux'
import _ from 'loadsh'


const MyTitle = ({date,visible}) => {
    return (
        <>
            <span>{dayjs(date).format('YYYY') + '年'}</span>
            <DownOutline className={classNames('arrow',visible && 'expand')} />
        </>
    )
}
const Year = () => {
    // 按年做数据分组
    const billList = useSelector(state => state.bill.billList)

    const yearGroup = useMemo(()=> {
        return _.groupBy(billList,(item)=> dayjs(item.date).format('YYYY'))
    },[billList])

    console.log("yearGroup:",yearGroup)

    // 控制日期选择器显示
    const [dateVisible,setDateVisible] = useState(false)
    //控制时间显示
    const [currentDate,setCurrebtDate] = useState(()=> {
        return new Date()
    })
    const now = new Date()  //最大可选时间

    const [currentYearList,setCurrentYearList] = useState([])

    const yearResult = useMemo(()=> {
        // 收入/支出/结余
        const pay = (currentYearList && currentYearList.filter(d => d.type === 'pay').reduce((a,c)=> a+c.money,0)) || 0
        const income = (currentYearList && currentYearList.filter(d => d.type === 'income').reduce((a,c)=> a+c.money,0))|| 0
        return {
            pay,
            income,
            total: income - pay
        }
    },[currentYearList])

    // 初始化统计数据
    useEffect(()=> {
        const fomatDate = dayjs(currentDate).format('YYYY')
        setCurrentYearList(yearGroup[fomatDate])
    },[currentDate,yearGroup])

    console.log("yearResult:",yearResult)

    // 日期切换确认操作
    const handleSelectDate = (val) => {
        setDateVisible(false)
        //其他逻辑
        setCurrebtDate(val)
        const fomatDate = dayjs(val).format('YYYY')
        setCurrentYearList(yearGroup[fomatDate])
    }

    return (
        <div className="year">
            <MyNavBar 
                back={null} 
                title={<MyTitle date={currentDate} visible={dateVisible} />}
                onClick={()=> setDateVisible(true)}>
            </MyNavBar>
            <div className="totalWrap">
                <div className="item">
                    <span>{yearResult.pay.toFixed(2)}</span>
                    <span className="itemText">支出</span>
                </div>
                <div className="item">
                    <span>{yearResult.income.toFixed(2)}</span>
                    <span className="itemText">收入</span>
                </div>
                <div className="item">
                    <span>{yearResult.total.toFixed(2)}</span>
                    <span className="itemText">结余</span>
                </div>
            </div>
            {/* 明细数据 */}
            <div className="list">
                <DayBill list={currentYearList}></DayBill>
            </div>
            {/* 日期选择器 */}
            <DatePicker
                    title='账单日期'
                    precision="year"
                    visible={dateVisible}
                    max={now}
                    value={currentDate}
                    onClose={() => {setDateVisible(false)}}
                    onCancle={() => {setDateVisible(false)}}
                    onConfirm={val => {handleSelectDate(val)}}
                />
        </div>
    )
}

export default Year